<!-- 测试浮窗表单 FormPopover-->
<script setup>
import { reactive } from 'vue'
import usePopoverForm from '@/hooks/use-popover-form'

defineOptions({
  name: 'PopFormTest'
})
const modelValue = defineModel({type: Boolean})
const props = defineProps({
  tempRef: {
    type: Object,
    default: () => ({})
  }
})

const formData = reactive({
  id: undefined,
  content: '',
  subTitle: '',
  title: '',
  createTime: '',
  remarks: ''
})

// 滚动/失焦监控/获取表单数据等
const {
  loading,
  popRef,
  getFormDataById
} = usePopoverForm(modelValue, formData)
defineExpose({getFormDataById})
</script>
<template>
  <PopoverForm
      ref="popRef"
      v-model="modelValue"
      :temp-ref="props.tempRef"
      width="340px"
  >
    <ElDescriptions :column="1" border v-loading="loading">
      <template #title>
        <div class="pop-form__header">
          <b class="pop-form__header-title">{{ formData.subTitle }}</b>
          <span class="pop-form__header-info">{{ formData.createTime }}</span>
        </div>
      </template>
      <ElDescriptionsItem label-class-name="descriptions-item__label" label-align="right">
          <template #label>
            <ElIcon>
              <Cellphone/>
            </ElIcon>
            标题
          </template>
          {{ formData.title }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label-class-name="descriptions-item__label" label-align="right">
        <template #label>
          <ElIcon>
            <User/>
          </ElIcon>
          副标题
        </template>
        {{ formData.subTitle }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label-class-name="descriptions-item__label" label-align="right">
        <template #label>
          <ElIcon>
            <School/>
          </ElIcon>
          内容
        </template>
        {{ formData.content }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label-align="right">
        <template #label>
          <ElIcon>
            <Message/>
          </ElIcon>
          备注
        </template>
        {{ formData.remarks }}
      </ElDescriptionsItem>
    </ElDescriptions>
  </PopoverForm>
</template>
